<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <script type="application/javascript" src="../js/vue.js"></script>

    <style>

    </style>
</head>
<body>

<div id="app14">
    <h2>人员列表</h2>
    <label><input type="text" placeholder="请输入姓名" v-model="keyword"></label>
    <ul>
        <li v-for="person in filterPersonArr" :key="person.id">
            {{person.name}}-{{person.age}}
        </li>
    </ul>
</div>

<script type="application/javascript">
    Vue.config.productionTip = false    // 阻止vue在启动时生成生产提示

    const vm = new Vue({
        el: "#app14",
        // 变量数据
        data: {
            keyword: '',
            personArr: [
                {id: 1, name: '马冬梅', age: 18},
                {id: 2, name: '周冬雨', age: 36},
                {id: 3, name: '周杰伦', age: 47},
                {id: 4, name: '李王伦', age: 23}
            ],
            // filterPersonArr: []  // 侦听属性的时候使用
        },
        // 方法
        methods: {},
        // 计算属性
        computed: {
            // 用计算属性实现列表过滤
            filterPersonArr: function () {
                return this.personArr.filter((person) => {
                    return person.name.indexOf(this.keyword) !== -1
                })
                // return this.personArr.filter(person => person.name.indexOf(this.keyword) !== -1)
            }
        },
        // 监听属性
        watch: {
            // 用侦听属性实现列表过滤
            /*'keyword': {
                immediate: true,    // 监听查询前调用一次,刷新数据
                handler: function (newValue, oldValue) {
                    console.log("keyword被修改为" + newValue)
                    this.filterPersonArr = this.personArr.filter((p) => {
                        return p.name.indexOf(newValue) !== -1
                    })
                }
            }*/
        },
    })
</script>
</body>
</html>
